<template functional>
  <a-sub-menu v-if="props.menus.children && props.menus.children.length >= 1" :key="props.menus.id">
    <template slot="title">
      <a-icon :type="props.menus.icon" />
      <span>{{ props.menus.name }}</span>
    </template>
    <main-sider-item v-for="menu in props.menus.children" :key="menu.id" :menus="menu" />
  </a-sub-menu>
  <a-menu-item v-else :key="props.menus.id">
    <router-link :to="{ path: '/' + props.menus.url }">
      <a-icon :type="props.menus.icon" />
      <span>{{ props.menus.name }}</span>
    </router-link>
  </a-menu-item>
</template>

<script>
import mainSiderItem from './main-sider-item'

export default {
  name: "main-sider-item",
  components: {
    mainSiderItem
  },
  data () {
    return {}
  },
  created () {
  },
  methods: {}
}
</script>

<style scoped>

</style>
